<template>
  <!-- 职位管理 -->
  <div class="list">
    <el-form :model="form" ref="form">
      <div class="query">
        <div>
          <el-form-item prop="input">
            <el-input
              v-model.trim="form.input"
              placeholder="企业名字"
              class="custom-input"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="status">
            <el-input
              v-model.trim="form.status"
              placeholder="职位类型"
              class="custom-input"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="styleStatus">
            <el-select
              v-model="form.styleStatus"
              placeholder="请选择审核状态"
              clearable
              style="margin-right: 20px"
            >
              <el-option label="待审核" value="0"></el-option>
              <el-option label="已通过" value="1"></el-option>
              <el-option label="已拒绝" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-button style="height: 40px" @click="reset">重置</el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            style="height: 40px"
            @click="selectSearch"
            >搜索</el-button
          >
        </div>
        <el-button
          type="primary"
          class="newadd"
          @click="navigateToRecord"
          style="height: 40px"
          v-show="isAdmin"
          >新增职位</el-button
        >
      </div>
    </el-form>
    <!-- 内容区表格-->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column width="40"></el-table-column>
        <el-table-column prop="postname" label="职位名称"></el-table-column>
        <el-table-column prop="company" label="所属企业"></el-table-column>
        <el-table-column prop="type" label="职位类型"></el-table-column>
        <el-table-column prop="salary" label="薪资范围"></el-table-column>
        <el-table-column prop="createtime" label="发布时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="{ row }">
            <el-tag type="warning" v-if="row.status == 0">待审核</el-tag>
            <el-tag type="success" v-else-if="row.status == 1">已通过</el-tag>
            <el-tag type="danger" v-else>已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reasons" label="拒绝理由"></el-table-column>
        <el-table-column prop="operate" label="操作" style="width: 150px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="handleButtonClick(scope.row)"
              >查看</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handleDeleteUser(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="bottom">
      <div class="paging" style="display: flex; justify-content: space-between">
        <el-pagination
          :current-page="pageInfo.currentPage"
          layout="total"
          :total="total"
        />
        <!-- 页数选择框 -->
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-size="pageInfo.pageSize"
          layout="prev, pager, next"
          :total="total"
          :hide-on-single-page="true"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getQueryall, getSearch, Delpost } from "../../api/position/index";
export default {
  data() {
    return {
      isAdmin: "",
      // 搜索
      form: {
        input: "",
        status: "",
        styleStatus: "",
      },
      // 搜索判断
      addSearch: "",
      tableData: [
        {
          // 职位名称
          postname: "",
          // 企业
          company: "",
          // 职业类型
          type: "",
          // 薪资范围
          salary: "",
          // 发布时间
          createtime: "",
          //状态
          status: "",
        },
      ],
      // rules: {
      //   input: [{ required: true, message: "请输入搜索内容", trigger: "blur" }],
      //   status: [
      //     { required: true, message: "请输入职位类型", trigger: "blur" },
      //   ],
      //   styleStatus: [
      //     { required: true, message: "请输入审核状态", trigger: "blur" },
      //   ],
      // },
      //分页
      total: null,
      pageInfo: {
        currentPage: 1,
        pageSize: 9,
      },
    };
  },
  mounted() {
    this.selectclin();
    let rname = JSON.parse(localStorage.getItem("rname"));
    console.log("身份:", rname);
    if (rname === "管理员") {
      this.isAdmin = false;
    } else {
      this.isAdmin = true;
    }
  },
  methods: {
    //获取数据
    async selectclin() {
      let res = await getQueryall({
        pageNum: this.pageInfo.currentPage,
        pageSize: this.pageInfo.pageSize,
      });
      // console.log("res.code", res.code !== null);

      if (res) {
        this.tableData = res.list;
        this.total = res.total;
      } else {
        this.$message.error("数据获取失败");
      }
    },
    navigateToRecord() {
      this.$router.push({ path: "/positionAdd" });
    },
    // 搜索
    async selectSearch() {
      if (
        this.form.input === "" &&
        this.form.status === "" &&
        this.form.styleStatus === ""
      ) {
        this.selectclin();
        // this.selectclin();
        // this.$message.error("请输入要查询数据");
      } else {
        let res = await getSearch({
          // 搜索
          pageNum: this.pageInfo.currentPage,
          pageSize: this.pageInfo.pageSize,
          company: this.form.input,
          type: this.form.status,
          status: this.form.styleStatus,
        });
        // console.log("res.code", res.code !== null);
        if (res.code == 200) {
          console.log("getQueryall", res);
          this.addSearch = "0";
          console.log("this.addSearch", this.addSearch);

          this.tableData = res.data.records;
          this.total = res.data.total;
        } else {
          this.$message.error("数据获取失败");
        }
      }
    },

    // 搜索重置
    reset() {
      this.selectclin();
      this.form.input = "";
      this.form.status = "";
      this.form.styleStatus = "";
      this.addSearch = "1";
    },
    //分页当前页
    handleCurrentChange(newPage) {
      this.pageInfo.currentPage = newPage;
      if (this.addSearch == 0) {
        this.selectSearch(newPage);
      } else {
        this.selectclin(newPage);
      }
    },
    async handleButtonClick(row) {
      console.log("当前行数据:", row);
      this.$router.push({ path: `/positions?id=${row.id}` });
    },
    // 删除
    async handleDeleteUser(row) {
      const confirmDelete = await this.$confirm(
        "此操作将永久删除该职位, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      );
      if (!confirmDelete) return;
      // 将 id 转换为字符串
      // const idAsString = Number(row.id);
      let res = await Delpost(row.id);
      if (res) {
        this.selectclin();
        this.$message.success("删除成功");
      } else {
        this.$message.error("删除失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.state {
  width: 60px;
  height: 25px;
  border-radius: 20px;
  text-align: center;
  line-height: 25px;
}
.list {
  margin: 24px;
  .query {
    width: 100%;
    height: 102px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    div {
      display: flex;
    }
  }
}
.custom-input,
.search-button {
  margin: 0 8px; /* 设置左右间距为8像素 */
}
.custom-input {
  width: 256px;
  height: 38px;
}
// .newadd {
//   margin: 0px 0px 0px 600px;
// }

//  分页
// .bottom {
//   width: 100%;
//   height: 50px;
//   background-color: white;
//   border-bottom-right-radius: 15px;
//   border-bottom-left-radius: 15px;
//   .paging {
//     width: 100%;
//     height: 30px;
//     padding: 0px 48px 0px 0px;
//     margin: 0 24px 24px;
//     .el-pagination {
//       display: flex;
//       justify-content: space-between;
//     }
//   }
// }
</style>